<!DOCTYPE html>
<html lang="en">
<head>
    <title>语音播报</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/static/iview/vue.min.js"></script>
    <script type="text/javascript" src="/static/mui/mui.min.js"></script>
    <link   rel="stylesheet" href="/static/mui/css/mui.min.css">
    <link rel="shortcut icon" href="/static/image/favicon.ico">
    <script>
        $(function () {
            var vm = new Vue({
                el: '#app',
                data:{
                    switch1: false,
                    title:'百度语音合成',
                    message: '当一个代码的工匠回首往事时，不因虚度年华而悔恨，也不因碌碌无为而羞愧，这样，当他老的时候，可以很自豪告诉世人，我曾经将代码注入生命去打造互联网的浪潮之巅，那是个很疯狂的时代，我在一波波的浪潮上留下了或重如泰山或轻如鸿毛的几笔。'
                },
                methods: {
                    convert: function () {
                        if(vm.message===""){mui.toast("请输入文字");return}
                        $.ajax({
                            url : "/convert/",
                            async : false,
                            type : 'post',
                            data : {'time' : (new Date()).toString(),'message':vm.message,'switch':vm.switch1},
                            success : function(result) {
                                $("#audio").attr("src","/static/audio/"+result);
                                document.getElementById("audio").play();
                            },
                            error : function() {
                                alert("网络异常");
                            }
                        });
                    },open: function (nodesc) {
                        this.$Notice.open({
                            title: '温馨提示',
                            desc: nodesc
                        });
                    },reset : function(){
                        vm.message="";
                    }
                }
            });
        });
    </script>
</head>
<body>
<div id="app" v-cloak>
     <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">語音播報</h1>
    </header>
    <div class="mui-content">
        <div class="mui-input-row" style="margin: 10px 5px;">
            <textarea v-model="message"  rows="10" placeholder="请输入..."></textarea>
        </div>
        <div class="mui-content-padded" style="text-align:center">
            <div @click="convert" class="mui-btn mui-btn-primary">
					合成播放
				</div>
            <div @click="reset" class="mui-btn mui-btn-primary">
					重置
            </div>
        </div>
    </div>
    <div class="mui-card">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">但行好事莫问前程</a>
                <div class="mui-collapse-content">
                    <img style="max-width:100%;" src="/static/image/wechat.png"/>
                </div>
            </li>
        </ul>
    </div>
    <div style="display: none">
	   <audio id="audio" controls="controls" ></audio>
	</div>
</div>

</body>
</html>